<template>
	<view class="content">
		<navigatorCompVue title="潮汕文化" bgcColor="#1E201F" fontColor="#fff">
			<template #rightWrap>
				<image
					@click="openShare"
					src="/static/imgs/chaoshan/dot.png"
					mode="widthFix"
					class="navigatorImg"
				></image>
			</template>
		</navigatorCompVue>
		<view style="" v-if="detail_info.articleUrlType == 1">
			<up-swiper
				:list="detail_info.articleUrls"
				keyName="image"
				:autoplay="false"
				height="1040rpx"
				:indicator="true"
				indicatorMode="dot"
				:circular="true"
				indicatorStyle="bottom:0rpx"
			></up-swiper>
		</view>
		<view
			class="videoBox"
			v-if="detail_info.articleUrlType == 2"
			:style="{ height: videoAttrs.height }"
		>
			<video :autoplay="false"  id="detail_video" :src="detail_info.articleUrls[0]"
				enable-play-gesture='true' object-fit='contain' :style="{'height':videoAttrs.height}"
				:poster="detail_info.videoCover">
			</video>
			<!-- v-if="showVideo"
			<view v-else style="width: 100%">
				<image class="poster" :src="detail_info.videoCover" mode="widthFix"
					:style="{'height':videoAttrs.height}"></image>
				<image class="stop" src="/static/imgs/chaoshan/stop.png" :style="{'width':videoAttrs.stopWidth}"
					mode="widthFix" @click="playVideo"></image>
			</view> -->
		</view>

		<!-- 信息展示 -->
		<view class="info">
			<view class="title">
				{{ detail_info.articleTitle }}
			</view>

			<view class="text">
				{{ isShort ? detail_info.articleContent : content_short }}
				<view class="expand" @click="expand" v-if="isShow">
					{{ isShort ? '收起' : '展开' }}
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footerBox"></view>
			<view class="footerFixed">
				<up-input
					@confirm="confirm"
					v-model.trim="txt"
					placeholder="发一条友善的评论吧"
					color="#fff"
					placeholderClass="placeholderClass"
					clearable
					shape="circle"
					border="none"
					custom-style="width: 386rpx;height: 72rpx;background: #333333;margin-right:44rpx"
					:focus="is_focus"
					@tap="to_comment(1)"
				></up-input>
				<image src="/static/imgs/chaoshan/comment.png" @click="openComment(1)"></image>
				<view class="text">{{ detail_info.commentNum }}</view>
				<image src="/static/imgs/chaoshan/love.png"></image>
				<view class="text">{{ detail_info.praiseNum }}</view>
			</view>
		</view>

		<!-- 发送评论弹框 -->
		<popupCompVue
			:bottom="bottom_height"
			:show="showComment"
			height="70vh"
			@closeCallback="closeComment"
			title="共345条评论"
			fontColor="#fff"
			:overlay="false"
			bgColor="#0E0E0E"
			zIndex="100"
		>
			<!-- <scroll-view scroll-y="true" class="commentScrollView"> -->
			<!-- 			<view class="info" style="background-color: #1D1D1D;padding:32rpx 24rpx;">
					<view class="title">
						这是我的标题这是我的标题这是我的标题标 这是我的标题这是我的标题这是我的
					</view>

					<view class="text">
						这是我的正文这是我的这是我的正文这是我的啊我的这是我的正文这是我的这是我的正文这是我的啊我的是我的正文这是我的这是我的正文这是我的啊我的这是我的正文这是我的这是我的正文这是我的啊我的
					</view>
				</view> -->
			<mescroll-uni
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:up="upOption"
				height="70vh"
			>
				<view class="commentList">
					<view class="commentBox" v-for="(items, index) in list" :key="index">
						<image
							class="avater"
							:src="items.UserHeadUrl || '/static/imgs/home/empty.png'"
						></image>
						<view class="commentInfo">
							<view class="top">
								<view class="name">{{ items.UserName }}</view>
								<image
									src="/static/imgs/chaoshan/dot.png"
									mode="widthFix"
									class="dot"
								></image>
							</view>
							<view class="middleText">
								{{ items.Content }}
							</view>
							<view class="bottom">
								<view class="time">{{ items.CreatedAt }}</view>
								<view class="display_flex">
									<image
										src="/static/imgs/chaoshan/comment.png"
										@click="comment(2, items, index)"
										style="margin-right: 40rpx"
									></image>
									<!-- <view class="text" style="margin-right: 40rpx;">{{items.CommentNum}}</view> -->
									<image
										src="/static/imgs/chaoshan/love.png"
										@click="praise(items, 1)"
										v-if="!items.Praise"
									></image>
									<image
										src="/static/imgs/chaoshan/zan_check.png"
										@click="praise(items, 0)"
										v-else
									></image>
									<view class="text">{{ items.PraiseNum }}</view>
								</view>
							</view>
							<view>
								<view
									class="commentBox commenBox_child"
									style="border: none"
									v-for="(item2, index2) in items.children"
									:key="index2"
								>
									<image
										class="avater_child"
										:src="items.UserHeadUrl || '/static/imgs/home/empty.png'"
									></image>
									<view class="commentInfo">
										<view class="top">
											<view class="name" v-if="item2.Level == 3">
												{{
													item2.UserName + ' 回复 ' + item2.ReplyUserName
												}}
											</view>
											<view class="name" v-if="item2.Level == 2">
												{{ item2.UserName }}
											</view>
											<image
												src="/static/imgs/chaoshan/dot.png"
												mode="widthFix"
												class="dot"
											></image>
										</view>
										<view class="middleText">
											{{ item2.Content }}
										</view>
										<view class="bottom">
											<view class="time">{{ item2.CreatedAt }}</view>
											<view class="display_flex">
												<image
													src="/static/imgs/chaoshan/comment.png"
													@click="comment(3, item2, index)"
													style="margin-right: 40rpx"
												></image>
												<!-- <view class="text" style="margin-right: 40rpx;">{{item2.CommentNum}}
												</view> -->
												<image
													src="/static/imgs/chaoshan/love.png"
													@click="praise(item2, 1)"
													v-if="!item2.Praise"
												></image>
												<image
													src="/static/imgs/chaoshan/zan_check.png"
													@click="praise(item2, 0)"
													v-else
												></image>
												<view class="text">{{ item2.PraiseNum }}</view>
											</view>
										</view>
									</view>
								</view>
							</view>

							<view
								class="showMoreComment"
								@click="showMore(items, index)"
								v-if="items.flag"
							>
								展开更多回复
							</view>
							<view
								class="showMoreComment"
								@click="put(index)"
								v-if="!items.flag && items.ChildrenNum > 3"
							>
								收起
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
			<!-- </scroll-view> -->
		</popupCompVue>

		<sharePopup
			v-model:show="showShare"
			title="更多"
			height="592rpx"
			:isReport="true"
			:reportType="4"
			:reportedId="detail_info.id"
		></sharePopup>
	</view>
</template>

<script setup>
import { ref, onMounted, nextTick, reactive } from 'vue';
import navigatorCompVue from '../../components/navigator/index.vue';
import popupCompVue from '/components/popup/index.vue';
import shareFuc from '../../utils/share';
import { commentListApi, commentCreateApi, praiseApi } from '@/API/chaoshan/index.js';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { timeFormat } from '@/node_modules/uview-plus';
import sharePopup from '/components/popup/share.vue';
const { mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const upOption = ref({
	empty: false
});
const navBarHeight = ref(0);
const showComment = ref(false);
const scrollTop = ref(0);
const content_short = ref('');
const isShort = ref(false); //是否收缩
let isShow = ref(false);
//视频的属性
const showVideo = ref(false);
const videoAttrs = reactive({
	articleUrls:'',
	play: false, //是否播放
	height: '1000rpx', //高度
	stopWidth: '120rpx'
});

//分享弹框
const showShare = ref(false);
let formData = reactive({
	level: '',
	levelFirstId: 0,
	replyId: 0,
	lastId: 0,
	index: -1
});
let is_focus = ref(false);
let txt = ref('');
let list = ref([]);
let more_list = ref([]);
let bottom_height = ref('');
let detail_info = ref({});
onUnload(() => {
	if (uni.getStorageSync('children')) {
		uni.removeStorage({
			key: 'children'
		});
	}
});
onLoad((o) => {
	if (uni.getStorageSync('children')) {
		uni.removeStorage({
			key: 'children'
		});
	}
	if (o.item) {
		detail_info.value = JSON.parse(o.item);
	}
});
onMounted(() => {
	const sysInfo = uni.getSystemInfo();
	uni.getSystemInfo({
		success: function (res) {
			navBarHeight.value = res.statusBarHeight;
		}
	});

	//缩写
	if (detail_info.value.articleContent.length > 38) {
		content_short.value = detail_info.value.articleContent.substring(0, 38) + '...';
		isShow.value = true;
	} else {
		content_short.value = detail_info.value.articleContent;
		isShow.value = false;
	}

	uni.createSelectorQuery()
		.select('.footer')
		.boundingClientRect((res) => {
			bottom_height.value = res.height + 'px';
		})
		.exec();
});
/**
 * 关闭弹框
 */
const closeComment = () => {
	showComment.value = false;
	changeVideoStyle();
};

/**
 * 改变popup
 */
const openComment = (num) => {
	showComment.value = !showComment.value;
	// if (showComment.value) {
	// 	formData.level = num
	// 	is_focus.value = true
	// 	formData.levelFirstId = 0
	// 	formData.replyId = 0
	// 	// getMescroll().resetUpScroll()
	// 	// getCommentList()
	// } else {
	// 	is_focus.value = false
	// }
	changeVideoStyle();
};
const to_comment = (num) => {
	console.log(num);
	formData.level = num;
	is_focus.value = true;
	formData.levelFirstId = 0;
	formData.replyId = 0;
};
const changeVideoStyle = () => {
	showVideo.value = false;
	if (showComment.value) {
		setTimeout(() => {
			// #ifndef H5||APP
			videoAttrs.height = `calc(30vh - ${navBarHeight.value}px - ${uni.upx2px(88)}px)`;
			// #endif
			// #ifndef MP-WEIXIN
			videoAttrs.height = `calc(30vh - ${navBarHeight.value}px - ${uni.upx2px(80)}px)`;
			// #endif
			videoAttrs.posterMode = 'aspectFit';
			videoAttrs.stopWidth = '50rpx';
		}, 300);
	} else {
		videoAttrs.height = '1000rpx';
		videoAttrs.posterMode = 'aspectFill';
		videoAttrs.stopWidth = '120rpx';
	}
};

/**
 * 返回上一页
 */
const goBack = () => {
	uni.navigateBack();
};

/**
 * 点击右上角分享
 */
const openShare = () => {
	showShare.value = true;
};

const closeShare = () => {
	showShare.value = false;
};

/**
 * 播放视频
 */
const playVideo = () => {
	showVideo.value = true;
};

/**
 * 展开
 */
const expand = () => {
	isShort.value = !isShort.value;
};

/**
 * 举报
 */
const report = () => {
	uni.navigateTo({
		url: '/subPages/chaoshan/report',
		success: () => {
			showShare.value = false;
		}
	});
};

/**
 * 分享到微信
 */
const shareWx = () => {
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession',
		type: 0,
		href: 'http://uniapp.dcloud.io/',
		title: 'uni-app分享',
		summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
		imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
		success: function (res) {
			console.log('success:' + JSON.stringify(res));
		},
		fail: function (err) {
			console.log('fail:' + JSON.stringify(err));
			uni.showToast({
				title: err.errMsg,
				icon: 'none'
			});
		}
	});
};

/**
 * 分享到朋友圈
 */
const shareFriendCircle = () => {
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneTimeline',
		type: 0,
		href: 'http://uniapp.dcloud.io/',
		title: 'uni-app分享',
		summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
		imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
		success: function (res) {
			console.log('success:' + JSON.stringify(res));
		},
		fail: function (err) {
			console.log('fail:' + JSON.stringify(err));
		}
	});
};
// 评论点赞
const praise = async (item, num) => {
	console.log(item, num);
	let rst = await praiseApi({
		commentId: item.Id,
		praise: num
	});
	console.log(rst);

	item.PraiseNum = rst.data.data.PraiseNum;
	if (num == 1) {
		item.Praise = true;
	} else {
		item.Praise = false;
	}
};
// 评论
const comment = (e, item, index) => {
	is_focus.value = false;
	setTimeout(() => {
		is_focus.value = true;
	});
	formData.level = e;
	if (e == 2) {
		formData.levelFirstId = item.LevelFirstId;
		formData.replyId = item.LevelFirstId;
	}
	if (e == 3) {
		formData.levelFirstId = item.LevelFirstId;
		formData.replyId = item.Id;
	}
	formData.index = index;
};
// 发送评论
const confirm = async (e) => {
	let rst = await commentCreateApi({
		content: e,
		level: formData.level,
		articleId: detail_info.value.id,
		levelFirstId: formData.levelFirstId,
		replyId: formData.replyId
	});
	if (rst.data.code == 0) {
		uni.showToast({
			title: rst.data.msg,
			icon: 'none'
		});
		if (formData.level != 1) {
			// 新的一级评论没有chilidrer属性
			if (!list.value[formData.index].children) {
				list.value[formData.index].children = [];
			}
			// 1级评论添加2-3级(展示)
			rst.data.data.CommentItem.CreatedAt = timeFormat(
				rst.data.data.CommentItem.CreatedAt,
				'yyyy-mm-dd hh:MM:ss'
			);
			list.value[formData.index].children.unshift(rst.data.data.CommentItem);
		} else {
			// 添加1级评论(展示)
			rst.data.data.CommentItem.CreatedAt = timeFormat(
				rst.data.data.CommentItem.CreatedAt,
				'yyyy-mm-dd hh:MM:ss'
			);
			list.value.unshift(rst.data.data.CommentItem);
		}
		// 发送完成重置为1级
		txt.value = '';
		is_focus.value = false;
		formData.levelFirstId = 0;
		formData.replyId = 0;
		formData.lastId = 0;
		formData.level = 1;
		formData.index = -1;
	}
};
// 得到更多子级数据
const getMore = async (index) => {
	let rst = await commentListApi({
		articleId: detail_info.value.id,
		reqNum: 3,
		levelFirstId: formData.levelFirstId,
		lastId: formData.lastId
	});
	more_list.value = rst.data.data.CommentItems;
	list.value[index].flag = rst.data.data.CommentItems.length == 3 ? true : false;
};
// 展开更多
const showMore = async (item, index) => {
	if (uni.getStorageSync('children')) {
		item.children = uni.getStorageSync('children');
		uni.removeStorage({
			key: 'children'
		});
	}
	formData.levelFirstId = item.LevelFirstId;
	formData.lastId = item.children[item.children.length - 1].Id;
	await getMore(index);
	more_list.value.forEach((ele) => {
		item.children.push(ele);
	});
};
// 收起更多
const put = (index) => {
	uni.setStorageSync('children', list.value[index].children);
	list.value[index].children = [];
	list.value[index].flag = true;
};

function addChildToLevel1(comments) {
	const level1Comments = comments.filter((comment) => comment.Level == 1);
	for (let level1Comment of level1Comments) {
		level1Comment.children = [];
		const level2Comments = comments.filter(
			(comment) => comment.Level != 1 && comment.LevelFirstId === level1Comment.Id
		);
		level1Comment.children.push(...level2Comments);
	}
	return level1Comments;
}

const upCallback = async (mescroll) => {
	let rst = await commentListApi({
		pageIndex: mescroll.num,
		reqNum: mescroll.size,
		articleId: detail_info.value.id,
		levelFirstId: formData.levelFirstId || 0,
		lastId: 0
	});
	if (rst.data.code == 0) {
		const curPageData = rst.data.data.CommentItems || []; // 当前页数据
		if (formData.levelFirstId == 0) list.value = []; // 第一页需手动制空列表
		list.value = list.value.concat(addChildToLevel1(curPageData)); //追加新数据
		curPageData.forEach((ele) => {
			ele.CreatedAt = timeFormat(ele.CreatedAt, 'yyyy-mm-dd hh:MM:ss');
		});
		list.value.forEach((ele) => {
			if (ele.ChildrenNum > 3) {
				ele.flag = true;
			} else {
				ele.flag = false;
			}
		});
		formData.levelFirstId = Math.max(
			...rst.data.data.CommentItems.map((item) => item.LevelFirstId)
		);
		mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
	} else {
		mescroll.endErr();
	}
};
const downCallback = (mescroll) => {
	formData.levelFirstId = 0;
	getMescroll().resetUpScroll();
};
// const getCommentList = (async () => {
// 	let rst = await commentListApi({
// 		articleId: detail_info.value.Id,
// 		reqNum: 55,
// 		levelFirstId: formData.levelFirstId,
// 		lastId: formData.lastId
// 	})
// 	list.value = addChildToLevel1(rst.data.data.CommentItems);
// 	list.value.forEach((ele) => {
// 		if (ele.ChildrenNum > 3) {
// 			ele.flag = true
// 		} else {
// 			ele.flag = false
// 		}
// 	})
// })
</script>

<style lang="scss">
page {
	background-color: #0e0e0e;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.content {
	padding: 0;
	z-index: 2;
}

.header-fixed-wrap {
	width: 100%;
	background-color: #ffffff;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
}

.header-fixed-wrap .flex-box {
	width: 100%;
	/* #ifdef APP || H5 */
	height: 88rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	height: 80rpx;
	/* #endif */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.header-fixed-wrap .left,
.header-fixed-wrap .right {
	flex: 2;
}

.header-fixed-wrap .middle {
	flex: 5;
}

.header-fixed-wrap .left .btn-back {
	width: 80rpx;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	font-weight: normal;
	padding: 0;
	background: none;
}

.header-fixed-wrap .middle .title {
	width: 80%;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 auto;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	line-height: 32rpx;
}

.navigatorImg {
	width: 48rpx;
	height: 48rpx;
	float: right;
}

::v-deep .u-swiper {
	overflow: auto !important;
	background-color: #1e201f !important;
}

::v-deep .u-swiper__wrapper__item__wrapper__image {
	height: 1000rpx !important;
}

.info {
	padding: 32rpx 32rpx 40rpx;
	background-color: #1e201f;

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #ffffff;
		line-height: 51rpx;
		letter-spacing: 1px;
	}

	.text {
		margin-top: 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #f5f5f5;
		line-height: 45rpx;
		letter-spacing: 1px;
		text-align: justify;
	}

	.expand,
	.retract {
		font-size: 28rpx;
		color: #f3e0bb;
		line-height: 45rpx;
		float: right;
	}
}

.videoBox {
	width: 100%;
	height: 900rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	video,
	.poster {
		width: 100%;
		background-color: #1e201f;
	}

	.stop {
		position: absolute;
		width: 120rpx;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

.footer {
	width: 100%;
	z-index: 101 !important;

	.footerBox {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 112rpx);
		background-color: #0e0e0e;
	}

	.footerFixed {
		position: fixed;
		background-color: #0e0e0e;
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 112rpx);
		z-index: 1000;
		display: flex;
		align-items: center;
		padding: 16rpx 32rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		box-sizing: border-box;
	}

	.placeholderClass {
		font-size: 28rpx;
		color: #969da3;
		line-height: 33rpx;
		font-style: normal;
		text-transform: none;
	}

	::v-deep .u-input {
		padding: 0 40rpx !important;
		font-size: 28rpx;
		color: #fff;
		line-height: 33rpx;
	}

	image {
		margin-right: 8rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.text {
		margin-right: 32rpx;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		font-style: normal;
		text-transform: none;
	}
}

.commentScrollView {
	width: 100%;
	height: 100%;
	padding: 0rpx 0rpx 120rpx;
	box-sizing: border-box;
}

.commentTitle {
	.area {
		height: 114rpx;
	}

	.fixedTitle {
		width: 100%;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 32rpx;
		padding: 40rpx 0;
		text-align: center;
		position: fixed;
		background-color: #0e0e0e;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		z-index: 999;
	}

	.close {
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 48rpx;
		height: 48rpx;
	}
}

.commentList {
	width: 100%;
	padding: 0 32rpx;
	box-sizing: border-box;

	.commentBox {
		display: flex;
		align-items: flex-start;
		width: 100%;
		padding: 40rpx 0 32rpx 0;
		border-bottom: 2rpx solid #1d1d1d;

		.avater {
			width: 80rpx;
			height: 80rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-right: 16rpx;
		}

		.avater_child {
			width: 56rpx;
			height: 56rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-right: 24rpx;
		}

		.commentInfo {
			flex: 1;
		}

		.top {
			width: 100%;
			height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 18rpx;
		}

		.name {
			font-size: 28rpx;
			color: #999999;
			line-height: 28rpx;
		}

		.dot {
			width: 40rpx;
			height: 40rpx;
		}

		.middleText {
			font-size: 30rpx;
			color: #ffffff;
			line-height: 45rpx;
			text-align: justified;
			margin-bottom: 24rpx;
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time {
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;
			}

			image {
				margin-right: 8rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.text {
				font-size: 28rpx;
				color: #ffffff;
				line-height: 33rpx;
				font-style: normal;
				text-transform: none;
			}
		}

		.showMoreComment {
			font-size: 26rpx;
			color: #f3e0bb;
			line-height: 26rpx;
			// margin-left: 82rpx;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}
	}

	.commentBox:last-child {
		border-bottom: 0;
	}

	.commenBox_child:first-child {
		padding-bottom: 0 !important;
	}

	.commenBox_child:last-child {
		padding-bottom: 0;
	}
}

.funcList {
	display: flex;
	width: 100%;
	padding: 0 48rpx;
	box-sizing: border-box;
	font-size: 26rpx;
	color: #ffffff;
	line-height: 30rpx;
	padding-bottom: 45rpx;

	.fun {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 52rpx;
	}

	image {
		width: 96rpx;
		height: 96rpx;
		margin-bottom: 16rpx;
	}
}
</style>
